<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框属性</title>
		<style>
			/* CSS3基础语法: 边框属性 */
			div{
				/* border边框属性: 宽度 样式  颜色*/
				border: 1px solid red;  /* 生成1px实线红色的边框*/
				/* div设置宽高 */
				height: 200px;
				width: 200px;
				/* border边框属性[复合属性]
				 CSS定义效果     属性: 属性值 属性值 属性值;
				 属性值理解为子属性,作为主属性使用
				 语法: 属性-属性值  主属性
				 border-width边框宽度属性     属性值数值px
				 border-style边框样式属性     属性值:solid实线
				                                dashed虚线
												double双线
												dotted点线
				  border-color边框颜色属性								
				 */
				border-width: 10px;
				border-style: dotted;
				border-color: yellow;
				/* 
				  边框四个方向: border-方向-子属性
				  需求:左边边框宽度设置30px
				       右边框设置为黑色
					   上边框设置为双线
					   下边框设置为虚线
				 */
				border-left-width: 30px;
				border-right-color: black;
				border-top-style: double;
				border-bottom-style: dashed;
				border: 1px solid red;
				/* 画圆  边框倒角属性 border-radius:属性值*/
				 border-radius: 200px;/* 宽高与倒角: 数值一致: 圆 */
				 /* 顺时针:  左上,右上,右下,左下 */
				 border-radius: 0px 200px;
				 /* 顺时针: 左上+右下, 右上+左下 */
				 border-radius: 10px 100px 200px;
				 /* 顺时针; 左上,右上+左下,右下 */
				 border-radius: 10px 50px 100px 150px;
				 /* 顺时针: 左上,右上,右下,左下 */
				 /* 需求: 左下角设置为300px */
				 /* border-方向-倒角方向-radius */
				 border-bottom-left-radius: 300px;
				 border-top-right-radius: 100px;
			}
		</style>
	</head>
	<body>
		<!-- html5 文本元素群 分区元素span,div
		 div元素: 页面空间区域,有宽没高
		 -->
		<div></div>
	</body>
</html>